<template>
	<div>
		<el-row :gutter="15">
			<el-form ref="mealCalendar" :model="mealCalendar" size="medium" label-width="101px" label-position="left">
				<el-col :span="12">
					<el-form-item label="食品名称" prop="foodName">
						<el-input v-model="mealCalendar.foodName" placeholder="请输入食品名称" clearable
							:style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="食品价格" prop="foodPrice">
						<el-input v-model="mealCalendar.foodPrice" placeholder="请输入价格" clearable
							:style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="时间" prop="supplytype">
						<el-select v-model="mealCalendar.supplytype" placeholder="请选择时间" clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in supplytypeOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="下拉选择" prop="foodType">
						<el-select v-model="mealCalendar.foodType" placeholder="请选择食物类型" clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in foodTypeOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="标签" prop="foodFlag">
						<el-select v-model="mealCalendar.foodFlag" placeholder="请选择标签"  clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in foodFlagOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否清真" prop="ishalal">
						<el-select v-model="mealCalendar.ishalal" placeholder="请选择是否清真" clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in ishalalOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="星期几上架" prop="supplyday">
						<el-select v-model="mealCalendar.supplyday" placeholder="请选择星期几" clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in supplydayOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="图片" prop="foodPicture">
						<el-select v-model="mealCalendar.foodPicture" placeholder="请选择图片" clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in foodPictureOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<img :src='"../../img/"+mealCalendar.foodPicture+".jpg"'
					style="height: 300px; width: 300px; margin: 0px auto;" />
			</el-form>
		</el-row>
		<div slot="footer">
			<el-button type="primary" @click="save">确定</el-button>
			<el-button @click="close">取消</el-button>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'mealCalendarEdit',
		props: ['editid'],
		data() {
			return {
				mealCalendar: {
					foodId: '',
					foodName: '',
					foodType: '',
					foodFlag: '',
					foodPrice: '',
					foodPicture: 1,
					ishalal: '',
					supplyday: 0,
					supplytype: 1,
				},
				rules: {
					supplyType: [{
						required: true,
						message: '请选择时间',
						trigger: 'change'
					}],
					foodType: [{
						required: true,
						message: '请选择食物类型',
						trigger: 'change'
					}],
					foodFlag: [{
						required: true,
						type: 'array',
						message: '请至少选择一个标签',
						trigger: 'change'
					}],
					ishalal: [{
						required: true,
						message: '请选择是否清真',
						trigger: 'change'
					}],
					foodPicture: [{
						required: true,
						message: '请选择图片',
						trigger: 'change'
					}],
				},
				supplyTypeOptions: [{
					"label": "早餐",
					"value": 1
				}, {
					"label": "午餐",
					"value": 2
				}, {
					"label": "晚餐",
					"value": 3
				}],
				foodTypeOptions: [{
					"label": "海鲜",
					"value": "海鲜"
				}, {
					"label": "荤菜",
					"value": "荤菜"
				}, {
					"label": "素菜",
					"value": "素菜"
				}, {
					"label": "大荤",
					"value": "大荤"
				}, {
					"label": "小荤",
					"value": "小荤"
				}, {
					"label": "套餐",
					"value": "套餐"
				}, {
					"label": "豆制品",
					"value": "豆制品"
				}, {
					"label": "饮料",
					"value": "饮料"
				}],
				foodFlagOptions: [{
					"label": "多糖",
					"value": "多糖"
				}, {
					"label": "多盐",
					"value": "多盐"
				}, {
					"label": "少糖",
					"value": "少糖"
				}, {
					"label": "少盐",
					"value": "少盐"
				}],
				ishalalOptions: [{
					"label": "是",
					"value": "是"
				}, {
					"label": "否",
					"value": "否"
				}],
				foodPictureOptions: [{
					"label": "虾",
					"value": 1
				}, {
					"label": "肉",
					"value": 2
				}, {
					"label": "素",
					"value": 3
				}, {
					"label": "鱼",
					"value": 4
				}, {
					"label": "套餐",
					"value": 5
				}, {
					"label": "饮料",
					"value": 6
				}],
				supplyDayOptions: [{
					"label": "周一",
					"value": 0
				}, {
					"label": "周二",
					"value": 1
				}, {
					"label": "周三",
					"value": 2
				}, {
					"label": "周四",
					"value": 3
				}, {
					"label": "周五",
					"value": 4
				}, {
					"label": "周六",
					"value": 5
				}, {
					"label": "周日",
					"value": 6
				}],
				url: '/meal/insert'
			}
		},
		computed: {},
		watch: {},
		created() {
			if (this.editid) {
				// 通过id 读原始数据
				this.axios.get('/meal/update', response => {
					this.mealCalendar = response.obj;
				}, {
					id: this.editid
				})
			}
		},
		mounted() {},
		methods: {
			save() {
				console.log(this.mealCalendar);
				this.$refs['mealCalendar'].validate((valid) => {
					if (valid) {
						console.log(valid);
						this.axios.post(this.url, response => {
							// 子组件要改变父组件的值
							this.$emit('update:show', false);
							this.$emit('update:editid', null);
							this.$emit('getData');
						}, this.mealCalendar)
					}
				})
			},
			close() {
				this.$emit('update:show', false);
			}


		}
	}
</script>
<style>
</style>
